<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/xzx_style.css" rel="stylesheet" />
		<link href="../css/xzx_pull_refresh.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../style/fjol_style.css"/>
		<link rel="stylesheet" type="text/css" href="../style/xol_style.css"/>
	</head>
	<style>
	</style>
	<body>
		<script src="../js/mui.min.js"></script>
		<script src="../js/common.util.js"></script>
		<script src="../js/network.js"></script>
		<script src='../js/md5.js'></script>
		<script src="../js/mui.pullToRefresh.js"></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view">

				</ul>
			</div>
		</div>
		
		<script type="text/javascript">
			var _type = 2; //1新房，2二手房，3租房
			var _pageNo = 1;
			var _lstData;
			var userType = '';
			
			mui.init({
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						height: 50, //可选,默认50.触发下拉刷新拖动距离,
						auto: false, //可选,默认false.首次加载自动下拉刷新一次
						contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
						contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
						contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
						callback: pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					},
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: false, //可选,默认false.自动上拉加载一次 
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: pullUpLoadMore
					}
				}
			});
			
			mui.plusReady(function() {
				var centerView= plus.webview.currentWebview();
				var parentPage = centerView.parent();
				mui.fire(parentPage,'onClientSubPageReady');
			});
			
			document.addEventListener('configClientSubpage',function(event){
				_type = event.detail.type;
				userType = event.detail.userType;
				mui('#refreshContainer').pullRefresh().pulldownLoading();
//				console.log(userType);
			});
			
			//下拉刷新
			function pulldownRefresh() {
				mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
				var ul = document.querySelector('.mui-table-view');
				_pageNo = 1;
					getMyHouseData(_pageNo, _type, function(lstClient) {
						ul.innerHTML = '';
						if(lstClient.length > 0) {
							ul.insertBefore(createFragment(ul, lstClient, false), ul.firstChild);
						}else if(lstClient.length == 0) {
							var _li = document.createElement('li');
							_li.className = 'mui-text-center';
							_li.innerHTML = '<img src="../images/icon_blank.png"/>';
							ul.insertBefore(_li,null);
//							console.log(ul.innerHTML);
						}
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					}, function() {
						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					});
			}
			
			//上拉加载
			function pullUpLoadMore() {
				var ul = document.querySelector('.mui-table-view');
				_pageNo++;
					getMyHouseData(_pageNo, _type, function(lstClient) {
						if(lstClient.length > 0) {
							ul.appendChild(createFragment(ul, lstClient, true));
						}
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(lstClient.length);
					}, function() {
						mui('#refreshContainer').pullRefresh().endPullupToRefresh();
					});
			}
			var _url = '';
			var getMyHouseData = function(page, kind, successCallback, failCallback) {

				var userInfo = common.myStorage.getItem('userInfo');
				var param = [{
					key: 'clientId',
					value: userInfo.clientId
				}, {
					key: 'kind',
					value: kind
				}, {
					key: 'page',
					value: page
				}, {
					key: 'rows',
					value: 10
				}];
				var net = fjNetwork;
				
				if(userType=='buyer'){
					_url = 'fjzx/common/house-trading-detail-list.json';
				}else{
					_url = 'fjzx/client/my-house-list.json';
				}
				net.get(_url, param, function(data) {
//					console.log(JSON.stringify(data.rows));
					//成功
					if(data.rows.length > 0) {
						if(page == 1) {
							_lstData = data.rows;
						} else {
							_lstData.push(data.rows);
						}
					}
					successCallback(data.rows);
//					console.log(JSON.stringify(data));

				}, function(message) {
					//失败
					mui.toast(message);
					failCallback();
				});
			};
			var createFragment = function(ul, lstHouse) {
				var fragment = document.createDocumentFragment();
				var li;
				for(var i = 0; i < lstHouse.length; i++) {
					li = document.createElement('li');
					li.className = 'mui-table-view-cell';
					li.id = i;
					var houseInfo = lstHouse[i];
					var data = new Array();
					
					var reserveDate = new Date(houseInfo.reserveDate).toLocaleString();
					
						data.push('<a class="" style="padding-right:20px;">');
		                    data.push('<img class="mui-pull-left mr5" width="100" height="80" src="'+houseInfo.coverImage+'">');
		                    data.push('<div class="mui-media-body">');
		                        data.push('<span class="color02b260 f10">['+houseInfo.statusName+']</span>('+houseInfo.area+')'+houseInfo.buildingName+' '+houseInfo.buildNumber+'-'+houseInfo.number);
		                        data.push('<div class="mui-ellipsis mui-clearfix mt10">');
		                        if(_type == 3){
		                        	data.push('<span class="newRed f10 mui-pull-right">'+houseInfo.leasePriceMonth+'元/月</span>');
		                        }else{
		                        	if(userType=='buyer'){
		                        		data.push('<span class="newRed f14 mui-pull-right">'+parseInt(houseInfo.dealPrice/10000)+'万</span>');
		                        	}else{
		                        		data.push('<span class="newRed f14 mui-pull-right">'+parseInt(houseInfo.totalPrice/10000)+'万</span>');
		                        	}
		                        }
		                        	
		                        	data.push('<div>');
		                        		data.push('<p>');
		                        			data.push('<span class="color02b260 f10">'+houseInfo.collectionTotal+'</span>人关注');
//		                        			data.push('<span class="mui-badge mui-badge-success mui-badge-inverted f10">'+houseInfo.bargainTotal+'</span>次砍价');
		                        		data.push('</p>');
		                        		data.push('<p class="mui-inline">最新交易进度：</p><span class="f08">'+(houseInfo.tradingStateName?houseInfo.tradingStateName:"暂无")+'</span>');
		                        	data.push('</div>');
		                       data.push(' </div>');
		                   data.push(' </div>');
						data.push('</a>');
								    
					li.innerHTML = data.join('');
					fragment.appendChild(li);
				}
				return fragment;
			};
			mui(".mui-table-view").on('tap', '.mui-table-view-cell', function() {
				//获取id
				var index = this.getAttribute('id');
				var houseModel = _lstData[index];
				mui.openWindow({
						url: 'trade_progress.html',
						id: 'trade_progress',
						extras: {
							houseModel: houseModel,
							kind:_type
						},
						show: {
							autoShow: true, //页面loaded事件发生后自动显示，默认为true
							aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
							duration: 200, //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
							event: 'titleUpdate', //页面显示时机，默认为titleUpdate事件时显示
							extras: {} //窗口动画是否使用图片加速
						}
				});
			});
		</script>
	</body>

</html>